<template>
  <image :src="src" :style="picSize" @click="click" @load="e => loaded(e)"></image>
</template>
<style lang="scss">

</style>
<script>
module.exports = {
  props: {
    height: {default: 1},
    src: {default: ''},
    width: {default: 1}
  },
  data () {
    return {
      picSize: {width: '1px', height: '1px'}
    }
  },
  created () {
  },
  methods: {
    loaded (e) {
      let size = e.size
      let picSize = {
        width: this.width,
        height: this.height
      }
      if (picSize.width > size.naturalWidth) {
        picSize.width = size.naturalWidth
      }
      if (picSize.height > size.naturalHeight) {
        picSize.height = size.naturalHeight
      }
      if (picSize.height !== 1) {
        picSize.width = size.naturalWidth * picSize.height / size.naturalHeight
      }
      if (picSize.width !== 1) {
        picSize.height = size.naturalHeight * picSize.width / size.naturalWidth
      }
      this.picSize.width = picSize.width + 'px'
      this.picSize.height = picSize.height + 'px'
    },
    click () {
      this.$emit('click')
    }
  }
}
</script>
